import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class EditTransferDetailModal extends Component {
  constructor(props) {
    super(props);
  }

  editDetailHandler = () => {
    const { editDetailHandler } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        editDetailHandler(values);
        this.props.form.resetFields();
      }
    });
  };


  render() {
    const { children, detailList, assetList, id, detailItem, roomList, userList, deptList, rackList } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };

    const getRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
      return <Option key={item.name}>{item.name}</Option>
    })

    const loop = data => data.map((item) => {
      if (item.depts && item.depts.length) {
        return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''}>{loop(item.depts)}</TreeNode>;
      }
      return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''} />;
    });

    const getRack = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.assetName}</Option>
    })

    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}

          visible={this.props.visible}
          onOk={this.editDetailHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout="inline" onSubmit={this.editDetailHandler}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('detailId', { initialValue: detailItem.id_})(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <Row gutter={16}>
                    <Col span={12}>
                      <FormItem
                        label="目标管理部门"
                        hasFeedback>
                        {
                          getFieldDecorator('targetManageBranch', {
                            initialValue:detailItem.targetManageBranchId_+'',
                            rules: [{
                              required: true, message: '请选择目标管理部门',
                            }]
                          })(
                            <TreeSelect
                              showSearch
                              treeNodeFilterProp="title"
                              style={{ width: 200 }}
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="目标管理部门"
                              allowClear
                              treeDefaultExpandAll
                            >
                              <TreeNode key={deptList.id_ + ''} title={deptList.name} value={deptList.id_ + ''}>
                                {deptList.depts && loop(deptList.depts)}
                              </TreeNode>
                            </TreeSelect>
                            )
                        }
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                        label="目标领用部门"
                        hasFeedback>
                        {
                          getFieldDecorator('targetUseBranch', {
                            initialValue:detailItem.targetUseBranchId_+'',
                            rules: [{
                              required: true, message: '请选择目标领用部门',
                            }]
                          })(
                            <TreeSelect
                              showSearch
                              treeNodeFilterProp="title"
                              style={{ width: 200 }}
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="目标领用部门"
                              allowClear
                              treeDefaultExpandAll
                            >
                              <TreeNode key={deptList.id_ + ''} title={deptList.name} value={deptList.id_ + ''}>
                                {deptList.depts && loop(deptList.depts)}
                              </TreeNode>
                            </TreeSelect>
                            )
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={12}>
                      <FormItem
                        label='目标领用人'
                        hasFeedback
                      >
                        {getFieldDecorator('targetEndUser', {
                          initialValue:detailItem.targetEndUser+'',
                          rules: [{
                            required: true, whitespace: true, message: '请选择目标领用人',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 200 }}
                            placeholder="目标领用人"
                            optionFilterProp="children"
                          >
                            {getUser(userList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                        label='是否迁移'
                        hasFeedback>
                        {getFieldDecorator('status', {
                          initialValue:detailItem.status+'',
                          rules: [{
                            required: true, whitespace: true, message: '请选择是否迁移',
                          }]
                        })(
                          <Select
                          showSearch
                          style={{ width: 200 }}
                          placeholder="是否迁移"
                          optionFilterProp="children"
                        >
                          <Option value="3">是</Option>
                          <Option value="1">否</Option>
                        </Select>
                          )}
                      </FormItem>
                    </Col>
                    
                  </Row>
                  <Row gutter={16}>

                  <Col span={12}>
                      <FormItem
                        label='目标机房'
                        hasFeedback
                      >
                        {getFieldDecorator('targetRoom', {
                          initialValue:detailItem.targetRoomId_+'',
                          rules: [{
                            required: true, whitespace: true, message: '请选择目标机房',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 200 }}
                            placeholder="目标机房"
                            optionFilterProp="children"
                          >
                            {getRoom(roomList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                        label='目标机柜'
                        hasFeedback
                      >
                        {getFieldDecorator('targetRack', {
                          initialValue:detailItem.targetRackId_+'',
                          rules: [{
                            required: true, whitespace: true, message: '请选择目标机柜',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 200 }}
                            placeholder="目标机柜"
                            optionFilterProp="children"
                          >
                            {getRack(rackList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                   
                  </Row>

                  <Row gutter={16}>
                  <Col span={12}>
                      <FormItem
                        label='目标起始U'
                        hasFeedback>
                        {getFieldDecorator('targetStart', {
                          initialValue:detailItem.targetStart+'',
                          rules: [{
                            required: true, whitespace: true, message: '请输入目标起始U',
                          }]
                        })(
                          <Input type="text" placeholder="目标起始U" style={{ width: '200px' }} />
                          )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                        label='目标结束U'
                        hasFeedback>
                        {getFieldDecorator('targetEnd', {
                          initialValue:detailItem.targetEnd+'',
                          rules: [{
                            required: true, whitespace: true, message: '请输入目标结束U',
                          }]
                        })(
                          <Input type="text" placeholder="目标结束U" style={{ width: '200px' }} />
                          )}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>

            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(EditTransferDetailModal)
